<template>
	<view class="container" style="height: 100%;width: 100%;position: relative;overflow: hidden;">
		<uni-nav-bar :statusBar="true" :fixed="true" :border='false' color="#113A62" backgroundColor="#E3EDF7" left-icon="back"
			 title="新建加班申请" @clickLeft="back"/>
		<view style="height: 100%;width: 100%;position: relative;padding: 0 16px;box-sizing: border-box;">
			<view style="width: 100%;margin: 0px auto;overflow: hidden">
				<form class="form-warp" @submit="formSubmit">
					<view style="margin-top: 16px;" class="textSize">
						实验楼
					</view>
					<view class="input-group">
						<ep-select v-model="buildingNo" :options="buildingList" @change="bulidingChange"></ep-select>
					</view>
					<view style="margin-top: 16px;" class="textSize">
						实验室
					</view>
					<view class="input-group">
						<ep-select v-model="flevelNo" :options="flevelList" @change="labChange"></ep-select>
						<!-- <uni-down-select :data="flevelList" placeholder="请选择实验室" :value="flevelValue"  @change="labChange"></uni-down-select> -->
					</view>
					<view style="margin-top: 16px;" class="textSize">
						日期
					</view>
					<view class="input-group">
						<uni-datetime-picker type="date" :clear-icon="false" v-model="workDate" @change="maskDateClick" />
					</view>
					<view style="margin-top: 16px;" class="textSize">
						具体时间
					</view>
					<view class="input-group">
						<view style="display: flex;justify-content: space-between;align-items: center;">
							<uni-datetime-picker :hide-second='false' class="time" type="time" :clear-icon="false" v-model="workBenTime" @change="maskBenTimeClick" />
								<text class="timezhi">至</text>
							<uni-datetime-picker :hide-second='false' class="time" type="time" :clear-icon="false" :value="workEndTime" @change="maskEndTimeClick" />
						</view>
					</view>
					<view style="margin-top: 16px;" class="textSize">
						备注
					</view>
					<view class="input-group">
						<uni-easyinput type="textarea" :clearable="false" v-model="note" placeholder="请输入备注" />
					</view>
				</form>
			</view>
			<view style="display: flex;padding: 16px 4% 16px 4%;justify-content: space-between">
				<view class="cencel" @click="formcancel">
					取消
				</view>
				<view class="formconfirm" @click="formconfirm">
					提交申请
				</view>
			</view>
		</view>
		<!-- 确定取消弹窗 -->
		<view v-if="isOut" class="shadow"></view>
		<view v-if="isOut" class="out_all">
			<view class="out_title">加班申请</view>
			<view class="out_text">
				确定提交该加班申请吗？
			</view>
			<view style="margin-top: 50px;display: flex;justify-content: space-between;">
				<view class="cancel" @click="cancelShadow()">取消</view>
				<view class="confirm" @click="confirmShadow()">确定</view>
			</view>
		</view>
		<!-- 成功失败提示 -->
		<view v-if="isSuccess == 0 || isSuccess == 1" :class="isSuccess == 0 ? 'success' : 'error'">
			<view class="success_title">
				<view>
					<image v-show="isSuccess == 0" style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:text-bottom;" src="../../static/image/success.png" mode=""></image>
					<image v-show="isSuccess == 1" style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:text-bottom;" src="../../static/image/error.png" mode=""></image>
					<text class="success_text">通知</text>
				</view>
				<view>
					<image @click="successClose()" style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:middle;" src="../../static/image/searchClose.png" mode=""></image>
				</view>
				
			</view>
			<view class="success_content">
				{{successContent}}
			</view>
		</view>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				sysInfo: null, // 系统变量
				buildingList: [],
				buildingNo: '1',
				flevelList: [],
				flevelValue: '',
				flevelNo:'',
				isShadow: null, // 0旧密码 1新密码
				isSuccess: null,  // 0成功 1失败
				successContent:'', // 弹窗内容
				workDate: null,  // 日期
				workBenTime: null,  // 开始时间
				workEndTime: null,  // 结束时间
				note: '', // 备注
				isOut: false, // 取消确定弹窗
			}
		},
		onLoad() {
			that = this;
			that.sysInfo = this.$sys.getSysInfo();
			// 管理员
			if(that.sysInfo.froleid == 1){
				that.getBuildingListManage()
			}else{
				// 普通用户
				that.getBuildingList()
			}
			that.workDate = that.getDate(new Date()).split(' ')[0]
			that.workBenTime= that.getDate(new Date()).split(' ')[1]  // 开始时间
			that.workEndTime= "23:59" 
		},
		methods: {
			// 获取楼栋 -- 管理员
			getBuildingListManage(){
				that.buildingList = []
				// 场地
				that.$http.get('data/area/getList', {
					flag:35,
					arg1: that.sysInfo.fsiteNo,
				}).then(e => {
					console.log('e111',e)
					that.buildingList = e.list
					that.buildingNo = that.buildingList[0].value
					that.getLevelList(that.buildingList[0].value)
				}).catch(()=>{
					that.buildingList = []
				})
			},
			
			// 获取楼栋 -- 普通用户
			getBuildingList(){
				that.buildingList = []
				// 场地
				that.$http.get('data/area/getList', {
					flag:35,
					arg1: that.sysInfo.fsiteNo,
					arg2: that.sysInfo.userId,
				}).then(e => {
					console.log('e111',e)
					that.buildingList = e.list
					that.buildingName = that.buildingList[0].label
					that.buildingNo = that.buildingList[0].value
					that.getLevelList(that.buildingList[0].value)
				}).catch(()=>{
					that.buildingList = []
				})
			},
			
			// 获取实验室 -- 普通用户
			getLevelList(buildingNo){
				that.flevelList = []
				// 管理员
				if(that.sysInfo.froleid == 1){
					// 地点列表
					that.$http.get('data/area/getList', {
						flag:36,
						arg1: buildingNo,
					}).then(e => {
						console.log('e222',e)
						that.flevelList = e.list
						that.flevelName = e.list[0].label
						that.flevelNo = e.list[0].value
						
					}).catch(()=>{
						that.flevelList = []
					})
				}else{
					// 普通用户
					// 地点列表
					that.$http.get('data/area/getList', {
						flag:36,
						arg1: buildingNo,
						arg2: that.sysInfo.userId,
					}).then(e => {
						console.log('e222',e)
						that.flevelList = e.list
						that.flevelName = e.list[0].label
						that.flevelNo = e.list[0].value
						
					}).catch(()=>{
						that.flevelList = []
					})
				}
			},
			// 楼栋改变
			bulidingChange(e){
				console.log('楼栋改变',e)
				that.buildingNo = e
				that.getLevelList(e)
			},
			// 实验室改变
			labChange(e){
				that.flevelNo = e
			},
			// 日期改变
			maskDateClick(e){
				console.log('e',e)
				that.workDate = e
			},
			// 开始时间改变
			maskBenTimeClick(e){
				console.log('e',e.substring(0,6))
				that.workBenTime = e.substring(0,5)
			},
			// 结束时间改变
			maskEndTimeClick(e){
				console.log('e',e)
				that.workEndTime = e.substring(0,5)
			},
			getDate(e) {
					const date = new Date(e)
					var y = date.getFullYear();
					var m = date.getMonth() + 1;
					m = m < 10 ? ('0' + m) : m;
					var d = date.getDate();
					d = d < 10 ? ('0' + d) : d;
					var h = date.getHours();
					var minute = date.getMinutes();
					minute = minute < 10 ? ('0' + minute) : minute;
					return y + '-' + m + '-' + d +' ' + h + ':' + minute
			},
			successClose(){
				that.isSuccess = null
			},
			// 取消
			cancelShadow(){
				that.isOut = false
			},
			// 弹窗确定按钮
			confirmShadow(){
				that.isOut = false
				let temp = {
					fbegdate: new Date(that.workDate+' 00:00:00'),
					fbegtime: that.workBenTime,
					fbillstate: 1,
					fenddate: new Date(that.workDate+' 00:00:00'),
					fendtime: that.workEndTime,
					fnote: that.note,
					fsiteNo: that.sysInfo.fsiteNo,
					userId: that.sysInfo.userId,
					fpointNo: that.flevelNo
				}
				console.log('temp',temp)
				that.isSuccess = 0
				that.successContent ='提交成功'
				that.$http.postData('tcOvertime/create',temp).then(e => {
					that.isSuccess = 0
					that.successContent ='提交成功'
					setTimeout(function(){
						that.isSuccess = null
						uni.$emit('refreshAddWork');
						that.back()
					},2000)
				}).catch(()=>{
					that.isSuccess = 1
					that.successContent ='提交失败'
					setTimeout(function(){
						that.isSuccess = null
					},2000)
				})
			},
			// 确认按钮
			formconfirm(){
				if(that.workEndTime > that.workBenTime){
					that.isOut = true
				}else{
					that.isSuccess = 1
					that.successContent ='开始时间必须小于结束时间'
					setTimeout(function(){
						that.isSuccess = null
					},2000)
				}
			},
			// 取消按钮
			formcancel(){
				uni.navigateBack({
					delta: 1
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style>
	.cencel{
		width: 45%;
		height: 56px;
		line-height: 56px;
		background: #E3EDF7;
		/* outer2 */
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 17px;
		/* identical to box height, or 100% */
		text-align: center;
		color: #8B9EB0;
	}
	.formconfirm{
		width: 45%;
		height: 56px;
		line-height: 56px;
		background: #0F7CEA;
		border-radius: 4px;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 17px;
		/* identical to box height, or 100% */
		text-align: center;
		color: #FFFFFF;
	}
	.timezhi{
		/* Subtitle */
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 14px;
		line-height: 22px;
		color: #8B9EB0;

	}
	/* 遮罩层 */
	.shadow{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: #FAFCFD;
		opacity: 0.85;
	}
	.success{
		width: 80%;
		height: 116px;
		background: linear-gradient(0deg, rgba(225, 255, 220, 0.5), rgba(225, 255, 220, 0.5)), #E3EDF7;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		margin: auto;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 16px;
	}
	.error{
		width: 80%;
		height: 116px;
		background: linear-gradient(0deg, rgba(255, 40, 40, 0.2), rgba(255, 40, 40, 0.2)), #FFFFFF;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		margin: auto;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 16px;
	}
	.success_title{
		width: 100%;
		display: flex;
		justify-content: space-between;
		/* padding: 18px; */
	}
	.success_text{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		line-height: 28px;
		color: #113A62;
		margin-left: 10px;
	}
	.success_content{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		color: #113A62;
		margin-top: 6px;
	}
	.next{
		width: 100%;
		height: 48px;
		text-align: center;
		line-height: 48px;
		background: #E3EDF7;
		/* outer2 */
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 20px;
		letter-spacing: -0.4px;
		color: #8B9EB0;
		margin-top: 60px;
	}
	.pwd_title{
		width: 100%;
		text-align: center;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 20px;
		line-height: 40px;
		/* identical to box height, or 167% */
		color: #113A62;
		margin-top: 15px;
	}
	.pwd_all{
		width: 86%;
		margin: auto;
		height: 282px;
		background: #E3EDF7;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		padding: 16px;
	}
	.pwd_newall{
		width: 86%;
		margin: auto;
		height: 372px;
		background: #E3EDF7;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		padding: 16px;
	}
	.loginOut{
		width: 92%;
		margin: 16px auto;
		height: 56px;
		line-height: 64px;
		background: #E3EDF7;
		/* outer2 */
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		margin-bottom: 16px;
		
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 18px;
		/* identical to box height, or 100% */
		text-align: center;
		letter-spacing: -0.4px;
		color: #113A62;
		opacity: 0.6;
	}
	
	.form-warp {
		zoom: 1;
	}
	
	.form-warp:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20'
	}
	
	.input-group {
		position: relative;
		margin-top: 8px;
	}
	
	.input-group .uni-icons {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		left: 48rpx;
		top: 20rpx;
		border-right: 1rpx solid #dedede;
		padding-right: 10rpx;
		font-size: 30rpx !important;
	}
	
	.input-group input {
		padding: 0 20rpx 0 120rpx;
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 25px;
		background: #ffffff;
		font-size: 28rpx;
		border-radius: 50rpx;
	}
	
	/*解决光标大小不一致问题*/
	.uni-input-input {
		height: 100%;
		line-height: normal;
	}
	
	.account{
		/* Subtitle */
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 14px;
		line-height: 22px;
		/* identical to box height, or 157% */
		display: flex;
		align-items: center;
		color: #8B9EB0;
		margin-top: 40px;
	}
	
	.out_all{
		width: 85%;
		margin: 0 auto;
		height: 200px;
		background: #E3EDF7;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		position: absolute;
		left: 0;
		right: 0;
		top: 28%;
		bottom: 0;
		padding: 16px;
	}
	.out_title{
		width: 100%;
		text-align: center;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 20px;
		line-height: 40px;
		/* identical to box height, or 167% */
		color: #113A62;
		margin-top: 15px;
	}
	.out_text{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		line-height: 28px;
		color: #113A62;
		margin: 12px 0 0 10px;
	}
	
	.cancel{
		width: 45%;
		height: 48px;
		line-height: 48px;
		text-align: center;
		background: #E3EDF7;
		/* outer2 */
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 20px;
		letter-spacing: -0.4px;
		color: #8B9EB0;
	}
	.confirm{
		width: 45%;
		height: 48px;
		line-height: 48px;
		text-align: center;
		background: #E3EDF7;
		/* outer2 */
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 20px;
		letter-spacing: -0.4px;
		color: #8B9EB0;
	}
</style>
